<template>
  <div id="">
    <el-menu mode="horizontal"
      :default-active="menuIndex || 'home'">
      <el-menu-item index="home" @click="$router.push({ name: 'home' })">
        <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
        <span slot="title">首页</span>
      </el-menu-item>
      <sub-menu
        v-for="menu in menuList"
        :key="menu.menuId"
        :menu="menu"
        :dynamicMenuRoutes="dynamicMenuRoutes">
      </sub-menu>
    </el-menu>
  </div>
</template>

<script>
  // import SubMenu from './main-navbar-sub-menu'
  import { headerMenuActiveName } from '@/utils/index.js'
  export default {
    data () {
      return {
        dynamicMenuRoutes: [],
        menuIndex: '',
        menuList: {}
      }
    },
    components: {
      SubMenu
    },
    computed: {
      topMenuActiveName: {
        get () { return headerMenuActiveName(this) }
      }
    },
    watch: {
      topMenuActiveName: 'menuIndexChange'
    },
    created () {
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')

      // 获取顶部菜单列表
      this.$http('/sys/menu/top').then(({ data }) => { this.menuList = data })
      this.menuIndexChange()
    },
    methods: {
      menuIndexChange () {
        let name = this.topMenuActiveName
        console.log('this.topMenuActiveName', name)
        if (this.menuList[name] && this.menuList[name].menuId) {
          this.menuIndex = this.menuList[name].menuId + ''
        } else {
          this.menuIndex = ''
        }
      }
    }
  }
</script>
